<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <!-- 帖子Id -->
    <input type="text" style="display: none;" id="details_article_id">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- 帖子标题 -->
        <h2 class="page-title" id="details_article_title"></h2>
      </div>
    </div>
    <div class="col-auto d-none d-md-inline" style="padding: 0px 3px;">
      <ul class="list-inline list-inline-dots mb-0">
        <li class="list-inline-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"
            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
            <path d="M12 7v5l2 2"></path>
            <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
          </svg>
          <!-- 发布时间 -->
          <span id="details_article_createTime"></span>
        </li>
        <li class="list-inline-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24"
            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
            <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
            </path>
          </svg>
          <!-- 访问数量 -->
          <span id="details_article_visitCount"></span>
        </li>
        <li class="list-inline-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24"
            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
          </svg>
          <!-- 点赞数量 -->
          <span id="details_article_likeCount"></span>
        </li>
        <li class="list-inline-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="24"
            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
            <path d="M12 12l0 .01"></path>
            <path d="M8 12l0 .01"></path>
            <path d="M16 12l0 .01"></path>
          </svg>
          <!-- 回复数量 -->
          <span id="details_article_replyCount"></span>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <div class="row">
        <!-- 作者区 -->
        <div class="col-3 card">
          <div class="card-body p-4 text-center">
            <span class="avatar avatar-xl mb-3 rounded" style="background-image: url(./image/avatar01.jpeg)"
              id="article_details_author_avatar"></span>
            <h3 class="m-0 mb-1"><a href="javascript:void(0);" id="article_details_author_name"></a></h3>
            <div style="margin-top: 10px;" id="div_details_send_message">
              <a href="javascript:void(0);" class="btn btn-primary" id="btn_details_send_message" data-bs-toggle="modal"
                data-bs-target="#index_message_modal">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24"
                  viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z">
                  </path>
                  <path d="M3 7l9 6l9 -6"></path>
                </svg>
                发私信
              </a>
            </div>
          </div>
        </div>
        <div class="col-9 card card-lg">
          <!-- 帖子正文 -->
          <div class="card-body">
            <h1 id="details_article_content_title"></h1>
            <div id="details_article_content"></div>
          </div>
          <!-- 卡片页脚 -->
          <div class="card-footer bg-transparent mt-auto justify-content-end"
            style="display: flex; justify-content: space-between; align-items: center;">
            <!-- 操作区开始 -->
            <div class="col-auto row g-2 align-items-center">
              <div class="col-auto">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-pink w-100" id="details_btn_like_count">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                      stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">
                      </path>
                    </svg>
                    点赞
                  </a>
                </div>
              </div>

              <div class="col-auto details-is-own" style="display: none;">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-tabler w-100" id="details_artile_edit">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                      <path d="M16 5l3 3"></path>
                    </svg>
                    <span>编辑</span>
                  </a>
                </div>
              </div>

              <div class="col-auto details-is-own" style="display: none;">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-outline-danger w-100" data-bs-toggle="modal"
                    data-bs-target="#details_delete_modal">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M4 7l16 0"></path>
                      <path d="M10 11l0 6"></path>
                      <path d="M14 11l0 6"></path>
                      <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                      <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                    </svg>
                    <span>删除</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- 操作区 结束 -->
        </div>
      </div>


      <div style="margin: 15px 0px; padding-left: 20px;">
        <h3>最新回复</h3>
      </div>


      <div style="margin: 15px 0px; padding-left: 20px;" id="details_reply_area">
        <!-- 回复列表区域 -->
      </div>

      <div class="row">
        <!-- 回复编辑区 -->
        <div class="card">
          <div class="card-body">
            <div class="mb-3" style="height: 300px;">
              <div id="article_details_reply">
                <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
                <textarea id="details_article_reply_content" style="display: none;"></textarea>
              </div>
            </div>
          </div>
          <div class="card-footer bg-transparent mt-auto">
            <!-- 操作区 结束 -->
            <div class="col-auto row g-2 justify-content-end">
              <div class="col-auto">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-tabler w-100" id="details_btn_article_reply">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                      <path d="M16 5l3 3"></path>
                    </svg>
                    <span>回复</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="details_delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-danger"></div>
      <div class="modal-body text-center py-4">
        <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24"
          viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
          stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 9v2m0 4v.01" />
          <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
        </svg>
        <h3>确定要删除当前帖子吗?</h3>
        <div class="text-muted">点击确认该帖子将被删除.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
                取消
              </a></div>
            <div class="col"><a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-dismiss="modal"
                id="details_artile_delete">
                删除
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 在原有 details.html 的 script 标签内替换以下内容 -->

<script>
  $(function () {
    // ===================== 初始化回复编辑区 ===================== 
    var editor = editormd("article_details_reply", {
      width: "100%",
      height: "100%",
      autoFocus: false,
      codeFold: true,
      markdown: '',
      saveHTMLToTextarea: true,
      searchReplace: true,
      watch: false,
      htmlDecode: "style,script,iframe|on*",
      emoji: true,
      taskList: true,
      tocm: true,
      tex: true,
      placeholder: '开始创作...',
      path: "./dist/editor.md/lib/"
    });

    // ===================== 请求帖子详情 ===================== 
    $.ajax({
      type: 'get',
      url: 'article/details?id=' + currentArticle.id,
      success: function (respData) {
        if (respData.code == 0) {
          initArticleDetails(respData.data);
        } else {
          $.toast({
            heading: '警告',
            text: respData.message,
            icon: 'warning'
          });
        }
      },
      error: function () {
        $.toast({
          heading: '错误',
          text: '访问出现问题,请与管理员联系',
          icon: 'error'
        });
      }
    });

    // ===================== 初始化页面内容 ======================
    function initArticleDetails(article) {
      currentArticle = article;
      if (!article.user.avatarUrl) {
        article.user.avatarUrl = avatarUrl;
      }

      $('#article_details_author_avatar').css('background-image', 'url(' + article.user.avatarUrl + ')');
      $('#article_details_author_name').html(article.user.nickname);
      $('#details_article_id').val(article.id);
      $('#details_article_title').html(article.title);
      $('#details_article_createTime').html(article.createTime);
      $('#details_article_visitCount').html(article.visitCount);
      $('#details_article_likeCount').html(article.likeCount);
      $('#details_article_replyCount').html(article.replyCount);
      $('#details_article_content_title').html(article.title)
      editormd.markdownToHTML('details_article_content', { markdown: article.content });

      if (article.own) {
        $('.details-is-own').show();
      }

      if (article.user.id == currentUserId) {
        $('#div_details_send_message').hide();
      } else {
        $('#btn_details_send_message').off('click').on('click', function () {
          setMessageReceiveUserInfo(article.user.id, article.user.nickname);
        });
      }

      $('#article_details_author_name').off('click').on('click', function () {
        profileUserId = article.userId;
        if (article.userId == currentUserId) {
          profileUserId = undefined;
        }
        $('#bit-forum-content').load('profile.html');
      });
    }

    // ====================== 楼中楼功能实现 ======================

    // 扩展评论数据，构建树形结构
    function enhanceReplyData(replies) {
      const replyMap = new Map();
      const rootReplies = [];

      // 首先将所有评论存入map
      replies.forEach(function (reply) {
        reply.children = [];
        replyMap.set(reply.id, reply);
      });

      // 构建树形结构
      replies.forEach(function (reply) {
        if (reply.replyId && replyMap.has(reply.replyId)) {
          // 这是子评论，添加到父评论的children中
          replyMap.get(reply.replyId).children.push(reply);
        } else {
          // 这是顶级评论
          rootReplies.push(reply);
        }
      });

      return rootReplies;
    }

    // 修改 buildCommentTree 函数中的底部工具栏部分
    function buildCommentTree(reply, level) {
      level = level || 0;
      const maxLevel = 3;
      if (level > maxLevel) return '';

      const indent = level * 25;
      const isChildComment = level > 0;

      // 获取点赞数，确保有默认值
      const likeCount = reply.likeCount || 0;

      let replyHtml = `
    <div class="comment-item ${isChildComment ? 'child-comment' : 'parent-comment'}" 
         data-comment-id="${reply.id}" 
         data-parent-id="${reply.replyId || ''}"
         style="margin-left: ${indent}px; ${isChildComment ? 'border-left: 2px solid #e9ecef; padding-left: 15px; margin-top: 10px;' : 'margin-bottom: 20px;'}">
        <div class="row">
            <div class="col-3 card">
                <div class="card-body p-4 text-center">
                    <span class="avatar avatar-xl mb-3 rounded" style="background-image: url(${reply.user.avatarUrl || avatarUrl})"></span>
                    <h3 class="m-0 mb-1"><a href="javascript:void(0);" class="a_reply_user_profile">${reply.user.nickname}</a></h3>
                    ${reply.user.id != currentUserId ? `
                    <div class="div_reply_send_message" style="margin-top: 10px;">
                        <a href="javascript:void(0);" class="btn btn-primary btn_reply_send_message" data-bs-toggle="modal" data-bs-target="#index_message_modal">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
                                <path d="M3 7l9 6l9 -6"></path>
                            </svg>
                            发私信
                        </a>
                    </div>
                    ` : ''}
                </div>
            </div>
            <div class="col-9 card card-lg">
                <div class="card-body">
                    <div class="comment-content" id="comment_content_${reply.id}">
                        ${reply.content || '暂无内容'}
                    </div>
                </div>
                <div class="card-footer bg-transparent mt-auto">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="text-muted">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
                                <path d="M12 7v5l2 2"></path>
                                <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
                            </svg>
                            ${reply.createTime}
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary btn-like-comment" 
                                    data-comment-id="${reply.id}"
                                    data-like-count="${likeCount}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
                                </svg>
                                <span class="like-count ms-1">${likeCount}</span>
                            </button>
                            <button class="btn btn-sm btn-outline-primary btn-reply-comment" 
                                    data-comment-id="${reply.id}"
                                    data-user-id="${reply.user.id}"
                                    data-user-name="${reply.user.nickname}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
                                </svg>
                                <span class="ms-1">回复</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 回复框（默认隐藏） -->
        <div class="reply-form-container mt-3" id="reply_form_${reply.id}" style="display: none;">
            <div class="card">
                <div class="card-body">
                    <div class="mb-2">
                        <label class="form-label">回复 @${reply.user.nickname}</label>
                        <textarea class="form-control reply-textarea" id="reply_text_${reply.id}" rows="3" placeholder="输入回复内容..."></textarea>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary btn-sm me-2 btn-cancel-reply" data-comment-id="${reply.id}">取消</button>
                        <button type="button" class="btn btn-primary btn-sm btn-submit-reply" data-comment-id="${reply.id}">提交回复</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 子评论容器 -->
        <div class="child-comments-container mt-3" id="child_comments_${reply.id}">
    `;

      // 递归渲染子评论
      if (reply.children && reply.children.length > 0) {
        reply.children.forEach(function (child) {
          replyHtml += buildCommentTree(child, level + 1);
        });
      }

      replyHtml += `</div></div>`;
      return replyHtml;
    }

    // 修改 buildArticleReply 函数，移除editormd渲染
    function buildArticleReply(data) {
      let replyArea = $('#details_reply_area');

      if (!data || data.length == 0) {
        replyArea.html('<p class="text-muted text-center py-4">还没有回复，第一个写下回复吧</p>');
        return;
      }

      replyArea.html('');

      // 增强数据，构建树形结构
      const enhancedData = enhanceReplyData(data);

      // 渲染评论树
      enhancedData.forEach(function (comment) {
        const commentHtml = buildCommentTree(comment);
        const commentElement = $(commentHtml);

        replyArea.append(commentElement);

        // 移除原来的editormd渲染代码
        // 现在评论内容直接通过HTML模板显示
      });

      // 绑定评论事件
      bindCommentEvents();
    }

    // 在 bindCommentEvents 函数中添加点赞事件绑定
    function bindCommentEvents() {
      // 回复按钮点击事件
      $('.btn-reply-comment').off('click').on('click', function () {
        const commentId = $(this).data('comment-id');

        // 隐藏其他回复框
        $('.reply-form-container').hide();

        // 显示当前回复框
        $('#reply_form_' + commentId).show();
        $('#reply_text_' + commentId).focus();
      });

      // 取消回复
      $('.btn-cancel-reply').off('click').on('click', function () {
        const commentId = $(this).data('comment-id');
        $('#reply_form_' + commentId).hide();
        $('#reply_text_' + commentId).val('');
      });

      // 提交回复
      $('.btn-submit-reply').off('click').on('click', function () {
        const commentId = $(this).data('comment-id');
        const replyText = $('#reply_text_' + commentId).val().trim();

        if (!replyText) {
          $.toast({
            heading: '提示',
            text: '请输入回复内容',
            icon: 'warning'
          });
          return;
        }

        submitCommentReply(commentId, replyText);
      });

      // 点赞评论事件
      $('.btn-like-comment').off('click').on('click', function () {
        const commentId = $(this).data('comment-id');
        const currentLikeCount = parseInt($(this).data('like-count')) || 0;

        likeComment(commentId, $(this));
      });

      // 绑定站内信功能
      $('.btn_reply_send_message').off('click').on('click', function () {
        const userId = $(this).closest('.comment-item').find('.btn-reply-comment').data('user-id');
        const userName = $(this).closest('.comment-item').find('.btn-reply-comment').data('user-name');
        setMessageReceiveUserInfo(userId, userName);
      });

      // 绑定用户资料功能
      $('.a_reply_user_profile').off('click').on('click', function () {
        const userId = $(this).closest('.comment-item').find('.btn-reply-comment').data('user-id');
        profileUserId = userId;
        $('#bit-forum-content').load('profile.html');
      });
    }

    // 添加点赞评论函数
    function likeComment(commentId, likeButton) {
      $.ajax({
        type: 'post',
        url: 'reply/thumbUp?id=' + commentId,
        success: function (respData) {
          if (respData.code == 0) {
            // 获取当前点赞数
            const currentCount = parseInt(likeButton.data('like-count')) || 0;
            const newCount = currentCount + 1;

            // 更新UI
            likeButton.data('like-count', newCount);
            likeButton.find('.like-count').text(newCount);

            // 添加点赞动画效果
            likeButton.addClass('liked');
            setTimeout(function () {
              likeButton.removeClass('liked');
            }, 600);

            $.toast({
              heading: '成功',
              text: '点赞成功',
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    }

    // 提交评论回复
    function submitCommentReply(parentCommentId, content) {
      const articleId = $('#details_article_id').val();

      // 获取父评论信息
      const parentComment = $('[data-comment-id="' + parentCommentId + '"]');
      const replyUserId = parentComment.find('.btn-reply-comment').data('user-id');

      const postData = {
        'articleId': articleId,
        'content': content,
        'replyId': parentCommentId,
        'replyUserId': replyUserId
      };

      $.ajax({
        type: 'post',
        url: 'reply/create',
        contentType: 'application/x-www-form-urlencoded',
        data: postData,
        success: function (respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: '回复成功',
              icon: 'success'
            });

            // 更新回复计数
            currentArticle.replyCount = currentArticle.replyCount + 1;
            $('#details_article_replyCount').html(currentArticle.replyCount);

            // 重新加载评论列表
            loadArticleDetailsReply();

            // 隐藏回复框
            $('#reply_form_' + parentCommentId).hide();
            $('#reply_text_' + parentCommentId).val('');
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    }

    // ====================== 加载回复列表 ======================
    function loadArticleDetailsReply() {
      $.ajax({
        type: 'get',
        url: 'reply/getReplies?articleId=' + currentArticle.id,
        success: function (respData) {
          if (respData.code == 0) {
            buildArticleReply(respData.data);
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    }

    // ====================== 加载回复 ======================
    loadArticleDetailsReply();

    // ====================== 处理点赞 ======================
    $('#details_btn_like_count').off('click').on('click', function () {
      $.ajax({
        type: 'post',
        url: 'article/thumbUp?id=' + currentArticle.id,
        success: function (respData) {
          if (respData.code == 0) {
            currentArticle.likeCount = currentArticle.likeCount + 1;
            $("#details_article_likeCount").html(currentArticle.likeCount);
            $.toast({
              heading: '成功',
              text: '点赞成功',
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    });

    // ====================== 回复帖子（顶级评论） ======================
    $('#details_btn_article_reply').off('click').on('click', function () {
      let articleIdEl = $('#details_article_id');
      let replyContentEl = $('#details_article_reply_content');

      if (!replyContentEl.val()) {
        $.toast({
          heading: '提示',
          text: '请输入回复内容',
          icon: 'warning'
        });
        return;
      }

      let postData = {
        'articleId': articleIdEl.val(),
        'content': replyContentEl.val()
      };

      $.ajax({
        type: 'post',
        url: 'reply/create',
        contentType: 'application/x-www-form-urlencoded',
        data: postData,
        success: function (respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: '回复成功',
              icon: 'success'
            });
            currentArticle.replyCount = currentArticle.replyCount + 1;
            $('#details_article_replyCount').html(currentArticle.replyCount);
            loadArticleDetailsReply();

            // 清空编辑器
            replyContentEl.val('');
            if (editor) {
              editor.setValue('');
            }
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    });

    // ====================== 处理删除事件 ======================
    $('#details_artile_delete').off('click').on('click', function () {
      $.ajax({
        type: 'post',
        url: 'article/delete?id=' + $('#details_article_id').val(),
        success: function (respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: '删除成功',
              icon: 'success'
            });
            changeNavActive($('#nav-link-title'));
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题,请与管理员联系',
            icon: 'error'
          });
        }
      });
    });

    // ====================== 处理编辑事件 ======================
    $('#details_artile_edit').off('click').on('click', function () {
      console.log('开始编辑');
      removeNavActive();
      $('#bit-forum-content').load('article_edit.html');
    });
    // ====================== 添加楼中楼样式 ======================
    const updatedStyles = `
<style>
.comment-item {
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.child-comment {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #f1f3f5;
}

.parent-comment {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
}

.reply-form-container {
    animation: fadeIn 0.3s ease;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.child-comments-container {
    margin-top: 15px;
}

/* 按钮样式调整 */
.btn-reply-comment,
.btn-like-comment {
    transition: all 0.2s ease;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.btn-reply-comment:hover,
.btn-like-comment:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 点赞按钮特殊样式 */
.btn-like-comment {
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

.btn-like-comment:hover {
    border-color: #d63939 !important;
    color: #d63939 !important;
    background-color: rgba(214, 57, 57, 0.04) !important;
}

.btn-like-comment.liked {
    border-color: #d63939 !important;
    color: #d63939 !important;
    background-color: rgba(214, 57, 57, 0.1) !important;
    animation: likeAnimation 0.6s ease;
}

@keyframes likeAnimation {
    0% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.1) translateY(-2px); }
    50% { transform: scale(0.95) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}

.like-count {
    font-weight: 500;
    margin-left: 4px;
}

/* 按钮组间距 */
.d-flex.gap-2 {
    gap: 0.5rem !important;
}

/* 评论内容样式 */
.comment-content {
    min-height: 60px;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 14px;
    color: #333;
    margin-bottom: 1rem;
}

.comment-content p {
    margin-bottom: 0.5rem;
}

.comment-content:empty::before {
    content: "暂无内容";
    color: #999;
    font-style: italic;
}

.card-body {
    padding: 1.5rem;
}

/* 卡片底部布局优化 */
.card-footer {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.card-footer .d-flex.justify-content-between {
    width: 100%;
}

/* 时间戳样式 */
.text-muted {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-footer .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .card-footer .d-flex.gap-2 {
        align-self: flex-end;
    }
    
    .btn-reply-comment,
    .btn-like-comment {
        min-width: 70px;
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}
</style>
`;
    // 替换原有的样式添加代码
    $('head').append(updatedStyles);

  });
</script>